<style>
.notification {
    width: 330px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 2px;
    position: fixed;
    right: 16px;
    background-color: #fff;
    box-shadow: 0 0 6px rgba(0,0,0,.04),0 2px 4px rgba(0,0,0,.12);
    transition: opacity .3s,transform .3s,right .3s,top .4s;
    overflow: hidden;
    z-index: 2000
}

.notification .fa-check-circle {
    color: #13ce66
}

.notification .fa-times-circle {
    color: #ff4949
}

.notification .fa-info-circle {
    color: #50bfff
}

.notification .fa-exclamation-triangle {
    color: #f7ba2a
}

.notification-group span {
    font-size: 16px;
    color: #1f2d3d
}

.notification-group p {
    font-size: 14px;
    line-height: 21px;
    margin: 10px 0 0;
    color: #8492a6;
    text-align: justify
}

.notification-icon {
    width: 40px;
    height: 40px;
    font-size: 40px;
    float: left;
    position: relative;
}

.notification-closeBtn {
    top: 20px;
    right: 20px;
    position: absolute;
    cursor: pointer;
    color: #c0ccda;
    font-size: 14px
}

.notification-closeBtn:hover {
    color: #99a9bf
}

.notification-fade-enter {
    transform: translateX(100%);
    right: 0
}

.notification-fade-leave-active {
    opacity: 0
}
  
</style>
<template>
  <div class="notification " :class="[ transitionClass ]" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
    <div class="notification-icon">
      <i :class="[ typeClass ]" v-if="type"></i>
    </div>
    <div class="notification-group" :style="{ 'margin-left': typeClass ? '55px' : '0' }">
      <span>{{ title }}</span>
      <p>{{ message }}</p>
      <div class="notification-closeBtn icon-close" @click="handleClose()"></div>
    </div>
  </div>
</template>

<script type="text/babel">
  let typeMap = {
    success: 'fa fa-check-circle',
    info: 'fa fa-info-circle',
    warning: 'fa fa-exclamation-triangle',
    error: 'fa fa-times-circle'
  }
  export default {
    data() {
      return {
        visible: false,
        title: '',
        message: '',
        duration: 3000,
        type: '',
        onClose: null,
        closed: false,
        top: null,
        timer: null,
        transitionClass: 'notification-fade-enter'
      }
    },
    computed: {
      typeClass() {
        return this.type && typeMap[this.type] ? `${typeMap[this.type]}` : ''
      }
    },
    watch: {
      closed(newVal) {
        if (newVal) {
          this.$el.addEventListener('transitionend', () => {
            this.$destroy(true)
            if (this.$el) {
              this.$el.parentNode.removeChild(this.$el)
            }
          })
          this.transitionClass = 'notification-fade-leave-active'
        }
      }
    },
    methods: {
      handleClose() {
        this.closed = true
        if (typeof this.onClose === 'function') {
          this.onClose()
        }
      },
      clearTimer() {
        clearTimeout(this.timer)
      },
      startTimer() {
        if (this.duration > 0) {
          this.timer = setTimeout(() => {
            if (!this.closed) {
              this.handleClose()
            }
          }, this.duration)
        }
      }
    },
    compiled() {
      var self = this
      setTimeout(function() {
        self.transitionClass = ''
      }, 10)
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          if (!this.closed) {
            this.handleClose()
          }
        }, this.duration)
      }
    }
  }
</script>
